import React, { useCallback } from "react"

import { Field_FormSave, Field_name_id } from "@/components/utils/field.list"

import { FormProps } from "@/components/modal/form.modal"
import adminMenuService from "@/services/admin.menu.service"
import { FormIcon, FormRender } from "@whzhuke/antd"
import { arrayCommon } from "@whzhuke/common"
import { useFetch } from "@whzhuke/usehook"
import { TreeSelectProps } from "antd"
import { useForm } from "antd/es/form/Form"
import { MenuType } from "@whzhuke/interface"

interface Props {
  values?: any
}
export const EditMenu: React.FC<Props & FormProps> = props => {
  const { values, onDone } = props
  const [form] = useForm<any>()
  const onFinish = useCallback(data => {
    adminMenuService[values ? "edit" : "add"]({ ...data }).then(res => {
      onDone?.()
    })
  }, [])
  const [{ data: details }] = values?.id ? useFetch(adminMenuService.item, [{ id: values?.id }]) : [{ data: null }]
  const treeData = useCallback(async (): Promise<TreeSelectProps["treeData"]> => {
    const [list] = await Promise.all([adminMenuService.all({ type: 2 })])

    return [
      {
        title: "管理后台",
        key: 0,
        value: 0,
        disabled: false,
        children: arrayCommon.doTree(
          list.data.map(m => ({
            key: m.id,
            value: m.id,
            parentId: m.parentId,
            title: m.menuName
          })),
          "key",
          "parentId"
        )
      }
    ]
  }, [])

  return (
    <FormRender
      form={form}
      initialValues={
        details
          ? {
              ...details
            }
          : { sort: 0, icon: "", type: MenuType.SYS, enabled: !0 }
      }
      layout="horizontal"
      preserve={false}
      noModal={false}
      onFinish={onFinish}
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      style={{ width: 600 }}
      fieldList={[
        details ? Field_name_id : undefined,
        { fieldType: "input", formItemConfig: { required: !0, name: "menuName", label: "菜单名称" }, config: { placeholder: "菜单名称" } },
        {
          fieldType: "treeSelect",
          formItemConfig: { required: !0, name: "parentId", label: "父级菜单" },
          config: {
            placeholder: "请选择父级菜单",
            treeDefaultExpandAll: !0
          },
          asyncConfig: {
            treeData
          }
        },
        {
          fieldType: "radioGroup",
          formItemConfig: { required: !0, name: "type", label: "类型" },
          config: {
            optionType: "button",
            options: [
              {
                label: "WEB",
                value: MenuType.WEB
              },
              {
                label: "系统",
                value: MenuType.SYS
              }
            ]
          }
        },
        { fieldType: "input", formItemConfig: { name: "url", label: "链接" }, config: { placeholder: "输入链接" } },
        { fieldType: "diy", formItemConfig: { name: "icon", label: "图标" }, component: <FormIcon /> },
        { fieldType: "number", formItemConfig: { name: "sort", label: "排序" }, config: { placeholder: "输入排序值" } },
        {
          fieldType: "radioGroup",
          formItemConfig: { required: !0, name: "enabled", label: "状态" },
          config: {
            optionType: "button",
            defaultValue: true,
            options: [
              {
                label: "启用",
                value: true
              },
              {
                label: "禁用",
                value: false
              }
            ]
          }
        },
        { ...Field_FormSave, formItemConfig: { wrapperCol: { offset: 8, span: 16 } } }
      ]}
      autoComplete="off"
    />
  )
}
